<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>注册 - 智能医疗系统</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
    <!-- Vue.js -->
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.14/vue.js"></script>
</head>
<body>
<div id="app" class="container mt-5" style="max-width:400px; margin:auto;">
    <h2 class="text-center">患者注册</h2>
    <form @submit.prevent="register" class="mt-4">
        <div class="mb-3">
            <input type="text" v-model="user.username" class="form-control" placeholder="用户名" required>
        </div>
        <div class="mb-3">
            <input type="password" v-model="user.password" class="form-control" placeholder="密码" required>
        </div>
        <button type="submit" class="btn btn-success w-100">注册</button>
    </form>
    <div v-if="message" class="alert alert-info mt-3">{{ message }}</div>
</div>
<script>
    new Vue({
        el: '#app',
        data: {
            user: { username: '', password: '' },
            message: ''
        },
        methods: {
            register() {
                fetch('/patient/register', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify(this.user)
                })
                    .then(response => {
                        if(response.ok){
                            this.message = '注册成功，请登录！';
                            this.user.username = '';
                            this.user.password = '';
                        } else {
                            response.text().then(text => { this.message = text; });
                        }
                    });
            }
        }
    });
</script>
</body>
</html>

